<script setup lang="ts">
import DeskQuestion from "@/assets/desk/question.svg?component";
import DeskSimulation from "@/assets/desk/simulation.svg?component";
import DeskErrorQuestion from "@/assets/desk/error.svg?component";
import DeskPaper from "@/assets/desk/paper.svg?component";
import DeskEdit from "@/assets/desk/edit.svg?component";
import DeskProduct from "@/assets/desk/product.svg?component";
import DeskSearch from "@/assets/desk/search.svg?component";
import { useWelcome } from "./utils/hook";

defineOptions({
  name: "Welcome"
});

const {
  simulatorQuestionSize,
  simulatorExamSize,
  simulatorErrorAnswerSize,
  produceExamSize,
  goMock,
  goTask,
  goScore
} = useWelcome();
</script>

<template>
  <div>
    <el-card shadow="never">
      <el-row :gutter="40" justify="space-between">
        <el-col :xl="6" :lg="6" :md="12" :sm="24" :xs="24">
          <el-card shadow="hover" class="mb-[10px] text-center">
            <div class="container">
              <div class="icon">
                <DeskQuestion width="100px" height="100px" />
              </div>
              <div class="text">
                <div class="text-large">习题总数</div>
                <div class="text-small">
                  <el-tag type="danger" size="large"
                    ><h1>{{ simulatorQuestionSize }}</h1></el-tag
                  >
                </div>
              </div>
            </div>
          </el-card>
        </el-col>
        <el-col :xl="6" :lg="6" :md="12" :sm="24" :xs="24">
          <el-card shadow="hover" class="mb-[10px] text-center">
            <div class="container">
              <div class="icon">
                <DeskSimulation width="100px" height="100px" />
              </div>
              <div class="text">
                <div class="text-large">模拟总数</div>
                <div class="text-small">
                  <el-tag type="success" size="large"
                    ><h1>{{ simulatorExamSize }}</h1></el-tag
                  >
                </div>
              </div>
            </div>
          </el-card>
        </el-col>
        <el-col :xl="6" :lg="6" :md="12" :sm="24" :xs="24">
          <el-card shadow="hover" class="mb-[10px] text-center">
            <div class="container">
              <div class="icon">
                <DeskErrorQuestion width="100px" height="100px" />
              </div>
              <div class="text">
                <div class="text-large">错题总数</div>
                <div class="text-small">
                  <el-tag type="warning" size="large"
                    ><h1>{{ simulatorErrorAnswerSize }}</h1></el-tag
                  >
                </div>
              </div>
            </div>
          </el-card>
        </el-col>
        <el-col :xl="6" :lg="6" :md="12" :sm="24" :xs="24">
          <el-card shadow="hover" class="mb-[10px] text-center">
            <div class="container">
              <div class="icon">
                <DeskPaper width="100px" height="100px" />
              </div>
              <div class="text">
                <div class="text-large">考试总数</div>
                <div class="text-small">
                  <el-tag type="info" size="large"
                    ><h1>{{ produceExamSize }}</h1></el-tag
                  >
                </div>
              </div>
            </div>
          </el-card>
        </el-col>
      </el-row>
      <el-row :gutter="40" justify="space-between" style="margin-top: 200px">
        <el-col :xl="6" :lg="6" :md="12" :sm="24" :xs="24">
          <div class="back" @click="goMock">
            <DeskEdit width="80px" height="80px" />
            <div><h1>模拟考试</h1></div>
          </div>
        </el-col>
        <el-col :xl="6" :lg="6" :md="12" :sm="24" :xs="24">
          <div class="back" @click="goTask">
            <DeskProduct width="80px" height="80px" />
            <div><h1>正式考试</h1></div>
          </div>
        </el-col>
        <el-col :xl="6" :lg="6" :md="12" :sm="24" :xs="24">
          <div class="back" @click="goScore">
            <DeskSearch width="80px" height="80px" />
            <div><h1>成绩查询</h1></div>
          </div>
        </el-col>
      </el-row>
    </el-card>
  </div>
</template>

<style scoped lang="scss">
///按钮布局
.container {
  display: flex;
  align-items: center;
  justify-content: center;
}

.icon {
  margin-right: 10px;
}

.text {
  display: flex;
  flex-direction: column;
}

.text-large {
  font-size: 24px;
}

.text-small {
  margin-top: 10px;
  font-size: 13px;
}

//
.back {
  position: relative;
  top: 50%;
  left: 50%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 200px;
  height: 200px;
  cursor: pointer;
  background: rgb(138 150 160 / 8%);
  border-radius: 200px;
  transform: translate(-50%, -50%);

  &:hover {
    background: rgb(138 150 160 / 20%);
    transition: background 0.6s;
  }
}
</style>
